<template>
  <div class="common-size horizontal department_value">
    <page-head :pageHead="pageHeadData"></page-head>
    <div class="horizontal-page-content">
      <div class="horizontal-content">
        <content-head :contentHead="contentHeadData"></content-head>
        <div class="content-container">
          <div class="adminOffice_deviceValuechart">
            <div class="adminOffice_deviceValuechart_box">
              <table class="left pie-chart-desc">
                <tbody>
                <tr v-for="(obj,index) in newChartData" v-bind:class=" (index%2 == 0)?'odd':''  " >
                  <td>{{obj.name}}</td>
                  <td>
                    <div class="bars clear">
                      <div v-for="(item,key) in obj.style" class="item left" :style="[{width: item.len + 'px'},{left: item.left + 'px'}]"></div>
                    </div>
                  </td>
                  <td>
                    <div class="tips clear">
                      <div v-for="(item,k) in obj.val" class="item left"><i v-bind:class="'i-'+(k+1) "></i>{{item}}</div>
                    </div>
                  </td>
                </tr>

                </tbody>
              </table>
              <div class="notice-tips">
                <div class="tips clear">
                  <div class="item left"><i class="i-1"></i>一万以下</div>
                  <div class="item left"><i class="i-2"></i>万元级</div>
                  <div class="item left"><i class="i-3"></i>十万级</div>
                  <div class="item left"><i class="i-4"></i>百万级</div>
                  <div class="item left"><i class="i-5"></i>千万级</div>
                </div>
              </div>
              <div class="y-name">单位：台</div>
            </div>
          </div>
          <div class="horizontal-distribute-container text-center">
            <div v-html="item" v-for="(item, index) in textData"></div>
          </div>
        </div>
      </div>
    </div>
    <page-footer :pageFooter="pageFooterData"></page-footer>
  </div>
</template>

<script>
  import pageHead from './pageHead.vue'
  import PageFooter from "./pageFooter.vue";
  import contentHead from "./contentHead.vue"
  import {nuxtMixins} from '../../assets/javascript/mixin'
  export default{
    name: 'department_brand',
    props:['chartData'],
    mixins: [nuxtMixins],
    data () {
      return {
        pageTitle: '<span>科室多维分析</span><span class="en_title"> Multidimensional Analysis of Departments</span>',
        contentTitle: '科室价值多维分析',
        titleDescribe: '设备统计价值TOP5科室'
      }
    },
    methods: {
      deviceValueChart () {
        const scale = 1;
        const totalLen = 420;
        if(!this.chartData.chartData) return
        const maxCount = this.chartData.maxCount
        this.chartData.chartData.forEach((obj,index) =>{
          obj.style = [];
          obj.len = [];
          let totalVal = obj.total;
          obj.val.forEach((item,key) =>{
            let l = parseInt((item*totalLen)/maxCount);
            let left = 0;
            if(key === 1) left = obj.len[0] - 5;
            if(key === 2) left = obj.len[0] + obj.len[1] - 5;
            if(key === 3) left = obj.len[0] + obj.len[1] + obj.len[2] - 5;
            if(key === 4) left = obj.len[0] + obj.len[1] + obj.len[2] + obj.len[3] - 5;
            obj.len.push(l);
            obj.style.push( {
              len: l + (key===0?0:5),
              left: left
            });
          })
        })
        return this.chartData.chartData
      }
    },
    computed:{
      newChartData () {
        return this.deviceValueChart()
      },
      textData () {
        if(!this.chartData.textData) return
        return this.chartData.textData
      }
    },
    mounted(){
    },
    components: {
      PageFooter,
      pageHead,
      contentHead
    }
  }
</script>
<style lang="scss">
  .common-size.horizontal {
    &.department_value {
      .horizontal-page-content {
        margin-top: 10px;
        .content-container {
          padding: 0 29px 0 29px;
          height: 452px;
          .horizontal-distribute-container {
            margin-top: 20px;
            text-indent: 0em;
          }
        }
        .page-chart {
          position: relative;
          .chart-box {
            width: 100%;
            height: 100%;
          }
          .y-name {
            position: absolute;
            top: 5px;
            right: 1%;
            font-size: 12px;
            color: #989898;
          }
        }
        .adminOffice_deviceValuechart {
          margin-top: 0px;
          padding: 0px;
          .adminOffice_deviceValuechart_box {
            height:auto;
            overflow: hidden;
            position: relative;
            background: #FFF;
            margin: 0 0 0px 0;
            .chart-box {
              width: 100%;
              height: 400px;
            }
            .y-name {
              position: absolute;
              top: 5px;
              right: 0%;
              font-size: 12px;
              color: #989898;
            }
            .notice-tips{
              color: #666;
              font-weight: normal;
              width: 475px;
              text-align: center;
              margin: auto;
              .tips{
                background: none;
                width: 600px;
                margin: 0 auto;
                .item{
                  width: 100px;
                  text-align: left;
                  margin-top: 20px;
                }
              }
            }
            >h3{
              color: #666;
              position: absolute;
              font-weight: normal;
              width: 100%;
              text-align: center;
              bottom: 20px;
            }

            >table{
              width: 910px;
              margin:25px 0 0;
              border-collapse:collapse;
              font-size: 12px;
              >tbody>tr{
                height: 50px;
                &.odd{
                  >td{
                    &:nth-child(2),&:nth-child(3),&:nth-child(4) {
                      background: #fafbfb;

                    }
                  }

                }
                &:nth-child(5){
                  >td{
                    &:nth-child(2),&:nth-child(3),&:nth-child(4) {
                      border-bottom:2px solid #efefef;
                    }
                  }
                }
                >td{
                  &:nth-child(1){
                    text-align: right;
                    color: #656666;
                    font-size: 12px;
                    padding-right: 10px;
                  }
                  &:nth-child(2){
                    border-top:2px solid #efefef;
                    border-left:2px solid #efefef;
                    .bars{
                      width: 420px;
                      height: 10px;
                      background: #efefef;
                      border-radius: 10px;
                      position: relative;
                      margin: 0 0 0 10px;
                      .item{
                        position: absolute;
                        width: 50px;
                        height: 10px;
                        border-radius : 10px;
                        -webkit-border-radius : 10px;
                        &:nth-child(1){
                          z-index: 50;

                          background : -webkit-linear-gradient(0deg, rgba(193, 182, 217, 1) 0.1%, rgba(125, 118, 181, 1) 99.9%);
                          background : -webkit-gradient(linear,3.61% 50% ,95.69% 50% ,color-stop(0.001,rgba(193, 182, 217, 1) ),color-stop(0.999,rgba(125, 118, 181, 1) ));
                          -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#C1B6D9', endColorstr='#7D76B5' ,GradientType=0)";
                          background : linear-gradient(90deg, rgba(193, 182, 217, 1) 0.1%, rgba(125, 118, 181, 1) 99.9%);
                          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#C1B6D9',endColorstr='#7D76B5' , GradientType=1);
                        }
                        &:nth-child(2){
                          z-index: 40;
                          left: 45px;
                          width: 55px;
                          background : -webkit-linear-gradient(0deg, rgba(157, 195, 231, 1) 0.1%, rgba(77, 137, 200, 1) 99.9%);
                          background : -webkit-gradient(linear,3.61% 50% ,95.69% 50% ,color-stop(0.001,rgba(157, 195, 231, 1) ),color-stop(0.999,rgba(77, 137, 200, 1) ));
                          -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#9DC3E7', endColorstr='#4D89C8' ,GradientType=0)";
                          background : linear-gradient(90deg, rgba(157, 195, 231, 1) 0.1%, rgba(77, 137, 200, 1) 99.9%);
                          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9DC3E7',endColorstr='#4D89C8' , GradientType=1);
                        }
                        &:nth-child(3){
                          z-index: 30;
                          left: 95px;
                          width: 55px;
                          background : -webkit-linear-gradient(0deg, rgba(167, 211, 157, 1) 0.1%, rgba(113, 189, 114, 1) 99.9%);
                          background : -webkit-gradient(linear,3.61% 50% ,95.69% 50% ,color-stop(0.001,rgba(167, 211, 157, 1) ),color-stop(0.999,rgba(113, 189, 114, 1) ));
                          -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#A7D39D', endColorstr='#71BD72' ,GradientType=0)";
                          background : linear-gradient(90deg, rgba(167, 211, 157, 1) 0.1%, rgba(113, 189, 114, 1) 99.9%);
                          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A7D39D',endColorstr='#71BD72' , GradientType=1);
                        }
                        &:nth-child(4){
                          z-index: 20;
                          left: 145px;
                          width: 55px;
                          background : -webkit-linear-gradient(0deg, rgba(248, 231, 158, 1) 0.1%, rgba(229, 182, 79, 1) 99.8%);
                          background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0.001,rgba(248, 231, 158, 1) ),color-stop(0.998,rgba(229, 182, 79, 1) ));
                          -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8E79E', endColorstr='#E5B64F' ,GradientType=0)";
                          background : linear-gradient(90deg, rgba(248, 231, 158, 1) 0.1%, rgba(229, 182, 79, 1) 99.8%);
                          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8E79E',endColorstr='#E5B64F' , GradientType=1);
                        }
                        &:nth-child(5){
                          z-index: 10;
                          left: 195px;
                          width: 55px;
                          background : -webkit-linear-gradient(0deg, rgba(247, 225, 135, 1) 0.1%, rgba(239, 139, 101, 1) 99.8%);
                          background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0.001,rgba(247, 225, 135, 1) ),color-stop(0.998,rgba(239, 139, 101, 1) ));
                          -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7E187', endColorstr='#EF8B65' ,GradientType=0)";
                          background : linear-gradient(90deg, rgba(247, 225, 135, 1) 0.1%, rgba(239, 139, 101, 1) 99.8%);
                          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7E187',endColorstr='#EF8B65' , GradientType=1);
                        }
                      }
                    }

                  }
                  &:nth-child(3){

                    border-top:2px solid #efefef;
                    border-right: 2px solid #efefef;
                    width: 310px;
                  }
                  &:nth-child(4){
                    color: #333;

                    font-size: 12px;
                    border-right:2px solid #efefef;
                    border-top:2px solid #efefef;
                  }

                }
              }
            }

          }

          .tips{
            width: 297px;
            height: 30px;
            background: url("../../assets/images/tips_bg.png") no-repeat;
            background-size: 100% 100%;
            line-height: 30px;
            .item{
              width: 55px;
              &:nth-child(1){
                margin: 0 0 0 17px;
              }
              >i{
                width: 10px;
                height: 10px;
                border-radius: 10px;
                display: inline-block;
                margin: 0 3px 0 0;
                &.i-1{
                  background: linear-gradient(to right, #C1B6D9, #7D76B5);
                }
                &.i-2{
                  background: linear-gradient(to right, #9DC3E7, #4D89C8);
                }
                &.i-3{
                  background: linear-gradient(to right, #A7D39D, #71BD72);
                }
                &.i-4{
                  background: linear-gradient(to right, #F8E79E, #E5B64F);
                }
                &.i-5{
                  background: linear-gradient(to right, #F7E187, #EF8B65);
                }
              }
              color: #333;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
</style>
